import React from 'react'
import { getList} from './api'
import { observer, inject } from 'mobx-react'
import './list.css'
@inject('MyStore')
@observer
class List extends React.Component {
    constructor() {
        super()
        this.state = {
            arr: [],
        }
    }
    componentDidMount() {
        let uid=localStorage.getItem('uid')
        getList(uid).then(res => {
            this.setState({
                arr: res.playlist
            })
        })
    }
    jump(){
        this.props.history.go(-1);
    }
    go(id){
        this.props.history.push(`/list/detail?id=${id}`)
    }
    render() {
        return (
            <div id="list">
                <h3>
                    <img src={require('../../imgs/back.png')  } onClick={this.jump.bind(this)}></img>
                    我的列表</h3>
                {this.state.arr.map(item => {
                    return (
                        <div id="nei">
                            <img src={item.coverImgUrl} alt="" />
                            <div onClick={this.go.bind(this,item.id)}>
                            <h2>{item.name}</h2>
                            <span>歌单描述:</span>
                            <h3>
                                
                                {item.description}</h3>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}

export default List